<template>
  <div class="register-wrap">
    <el-main class="main">
      <div class="form">
        <div class="text1">
          <span align="center"> <h2>学生账号注册</h2> </span>
        </div>
        <!-- <br />-->

        <el-form
          :model="form"
          status-icon
          label-width="80px"
          :rules="stuRegisterRules"
          :inline="true"
          ref="form"
        >
          <el-form-item label="姓名" prop="name">
            <el-input type="text" placeholder="姓名" v-model="form.name" />
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工作单位" prop="work_unit">
            <el-input
              type="text"
              placeholder="工作单位"
              v-model="form.work_unit"
            />
          </el-form-item>

          <el-form-item label="学历" prop="education">
            <el-select v-model="form.education">
              <el-option
                v-for="item in education_list"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="毕业院校" prop="school">
            <el-input
              type="text"
              placeholder="毕业院校"
              v-model="form.school"
            />
          </el-form-item>

          <el-form-item label="专业" prop="Major">
            <el-input
              type="text"
              placeholder="专业"
              v-model="form.Major"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="首次获证时间"
            prop="first_time"
            label-width="100px"
          >
            <el-date-picker
              type="date"
              :picker-options="pickerOptions"
              v-model="form.first_time"
              placeholder="请选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item label="入职日期" prop="hire_date">
            <el-date-picker
              type="date"
              :picker-options="pickerOptions"
              v-model="form.hire_date"
              placeholder="请选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item label="身份证" prop="id_card">
            <el-input type="text" placeholder="身份证" v-model="form.id_card" />
          </el-form-item>

          <el-form-item label="手机号" prop="Phone">
            <el-input type="text" placeholder="手机号码" v-model="form.Phone" />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              type="text"
              v-model="form.password"
              placeholder="请输入密码"
            />
          </el-form-item>

          <el-form-item label="确认密码" prop="repassword">
            <el-input
              type="text"
              v-model="form.repassword"
              placeholder="请再次输入密码"
            />
          </el-form-item>

          <el-form-item label="照片" prop="photo_path">
            <!-- <input v-model="form.photo_path" type="text" /> -->
            <input
              type="file"
              accept=".jpg,.png"
              @change="msg('添加了一张图片')"
              ref="photo"
            />
          </el-form-item>
        </el-form>

        <el-row style="padding: 10px 0">
          <el-col :span="20">
            <el-link type="primary" @click="$router.push('login')">
              已有账户?去登录
            </el-link>
          </el-col>
        </el-row>

        <el-row>
          <el-col :offset="6" :span="12">
            <el-button
              type="success"
              @click="testForm('form')"
              class="submitBtn"
            >
              注册
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import { stuRegisterRules } from "config/rules";

export default {
  name: "Regitser",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;
        },
      },
      stuRegisterRules,
      education_list: ["初中", "高中", "职高", "专科", "本科", "硕士研究生"],
      form: {
      },
    };
  },
  methods: {
    testForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          if(that.form.password === that.form.repassword)
          that.uploadPhoto();
          else
          that.msg('两遍密码不一致','warning')
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    uploadPhoto() {
      if (this.$refs.photo.files[0]) {
        this.msg("开始上传图片");
        let that = this;
        let d = new FormData();
        d.append("photo", this.$refs.photo.files[0]);
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        this.axios
          .post("/Login/Upload", d, config)
          .then((res) => {
            console.log(res);
            if (res.data.state === "success") {
              that.form.photo_path = res.data.photo;
              that.subForm();
            }
          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.$message({ message: "请先上传一张个人照片", type: "warning" });
      }
    },
    subForm() {
      let that = this;
      that.axios
        .post("/Student/Add", {
          Name: that.form.name,
          Password: that.form.password,
          Gender: that.form.gender,
          id_card: that.form.id_card,
          Phone: that.form.Phone,
          work_unit: that.form.work_unit,
          Education: that.form.education,
          School: that.form.school,
          Major: that.form.Major,
          hire_date: that.form.hire_date,
          first_time: that.form.first_time,
          photo_path: that.form.photo_path,
        })
        .then(function (response) {
          console.log(response);
          if (response.data.state === "success") {
            that.$message({
              message: "添加成功",
              type: "success",
            });
            that.$router.replace('/login')
          } else {
            that.$message({
              message: "添加失败:" + response.data.err,
              type: "error",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    msg(message,type='info') {
      this.$message({
        message,
        type
      });
    },
  },
  mounted() {},
};
</script>

<style scoped>
.register-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 1350px;
  height: 100%;
  overflow: hidden;
  background: url("~assets/left.png") top left no-repeat,
    url("~assets/right.png") top right no-repeat;
  background-size: contain, 380px;
}
.main {
  flex: 0.8;
  background-color: rgba(255, 255, 255, 0.9);
  width: 60%;
  height: 78%;
}
.submitBtn {
  width: 100%;
}
</style>